<template>
  <div id="NewsInformation">
    <div class="container">
      <div class="container text-center">
        <h3>产品列表</h3>
        <!-- <p style="color: #b2b2b2">Company News</p> -->
      </div>
      <van-divider />

      <van-row>
        <van-col span="24">
          <div v-if="lei_arr2.length">
            二级分类:
            <el-button v-for="i in lei_arr2"
              class="cus ml"
              @click="go_lei(i.id)"
              :key="i.id" type="primary">{{i.gname}}</el-button>
            <!-- <van-tag
              v-for="i in lei_arr2"
              class="cus ml"
              @click="go_lei(i.id)"
              :key="i.id"
              size="large"
              type="primary"
              >{{ i.gname }}</van-tag
            > -->
          </div>
          <van-divider />
          <div class="row2 mbt">
            <el-input placeholder="请输入内容" style="width:200px" v-model="input" clearable>
            </el-input>
            <el-button class="ml" type="primary" @click="search">搜索</el-button>
          </div>

          <div class="row_bw mt warp cus">
           <div v-for=' i in cp_list ' :key='i' style="width: 24%"   @click="go_cp_xq(i)">
            <div class="mt">名称: {{i.pname}}</div>
            <div class="van-hairline--surround pd">
                <img class="mt p_img"   style="object-fit: contain;" :src="$base+i.zimg"/>
            </div>
            
           </div>
         
           
          </div>

          <!-- <van-divider class="mt cus" v-if="cp_list.length>9" @click="next">加载更多</van-divider> -->

           <!-- <el-button class="mt" v-if="cp_list.length>9" type="primary" plain>主要按钮</el-button> -->

         
        </van-col>
      </van-row>
    </div>
    <van-divider />
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "Product",
  data() {
    return {
      page:1,
      input: "",
      user: "",
      lei_arr: [],
      lei_arr2: [],
      activeKey: 0,
      cp_list: [],
      item_index: 0,
      pid: "",
      type: 1,
      pname: "",
    };
  },
  mounted() {
    // alert('mounted');
    let suer = JSON.parse(localStorage.getItem("user"));
    this.user = suer;
    var wow = new WOW();
    wow.init();
    let i = this.$route.query.i;
   let ii=  JSON.parse(decodeURIComponent(i))
    console.log('i:',i);
    if (ii) {
      this.pid = ii.id;
    }
    let ty = this.$route.query.type;
    let ss = this.$route.query.ss;
    console.log("ty:", ty, "ss", ss, "ii:", i);

    if (ss) {
      this.pname = ss.sname;
      this.pid = ss.fid;
    }

    if (ty) {
      this.type = ty;
    }

    this.get_lei2();
    // this.get_lei();
    this.get_cp();
  },
  methods: {
    next(){
       this.page+=1;
       this.get_cp()
    },
    search(){
      
      if(!this.input){
        alert('请输入内容') ;return;
      }
      this.pname=this.input;
      this.get_cp()
    },
    go_cp_xq(e) {
      this.$router.push({
        path: "/productxq",
        query: {
          info: e,
        },
      });
    },
    go_lei(id) {
      this.pname='';
      this.pid = id;
      this.get_cp();
    },
    all() {
      (this.pid = ""), this.get_cp();
    },
    change(i) {
      console.log(i);
      this.pid = this.lei_arr[i - 1].id;
      this.get_cp();
      this.get_lei2();
    },

    get_cp() {
      let { pid,page } = this;
      console.log("223:", pid);
      let v = this;
      let data = {
        page: page,
        pagesize: 100,
        fenlei: pid,
        pname: this.pname,
      };
      this.http.post("/products/getproducts", data).then((res) => {
        console.log("res3:", res);
        if (res.data.data) {
          v.cp_list = res.data.data;
        } else {
          v.cp_list = [];
          
        }
      });
    },
    get_lei2() {
      let data = {
        pid: this.pid,
        type: this.type,
      };
      let v = this;
      this.http.post("/products/getproductlei", data).then((res) => {
        console.log("二级分类:", res);

        if (res.data.data) {
          v.lei_arr2 = res.data.data;
        } else {
          v.lei_arr2 = [];
        }
      });
    },
    get_lei() {
      let data = {
        pid: 1,
        type: this.type,
      };
      let v = this;
      this.http.post("/products/getproductlei", data).then((res) => {
        console.log("lei:", res);
        if (res.data.data) {
          v.lei_arr = res.data.data;
        } else {
          // v.lei_arr=[]
        }
      });
    },
  },
};
</script>
<style scoped>
.p_img{
   width: 18vw;
   height: 18vw;
}
.bx{
  background-color: #fffef9;
  padding: 20px;
}
.left_img{
  width: 50vw;
  height: 200px;
}
.tog {
  margin-left: 10px;
}
.right {
  float: right;
}
.nav {
  margin: 20px 0;
}
.nav > a {
  display: inline-block;
  text-decoration: none;
  width: 120px;
  height: 45px;
  line-height: 45px;
  color: #333;
  border: 1px solid #333;
}
.nav > a.active {
  color: #1e73be;
  border-color: #1e73be;
}
.nav > a:hover {
  color: #1e73be;
  border-color: #1e73be;
}
.news-container {
  overflow: hidden;
  margin-bottom: 0;
}
.news-container > li {
  width: 55.6%;
  height: 120px;
  float: left;
  color: #333;
  text-align: right;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.news-container > li:hover {
  color: #1e73be;
  border: 1px solid #1e73be;
  cursor: pointer;
}
.news-container > li:nth-of-type(2n) {
  float: right;
  text-align: left;
}
.news-container > li > .content {
  width: 60%;
  float: left;
  padding: 20px 0;
}
.news-container > li > .time {
  width: 20%;
  float: left;
  padding: 10px 0;
}
.news-container > li > .time > p {
  font-size: 30px;
  margin: 5px 0;
}
.news-container > li > .circle {
  width: 20%;
  height: 100%;
  float: left;
  position: relative;
}
.news-container > li > .circle > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
}
.news-container > li > .circle > i {
  display: block;
  width: 1px;
  height: 100%;
  background: #707070;
}
.news-container > li:nth-of-type(2n) > .content {
  float: right;
}
.news-container > li:nth-of-type(2n) > .time {
  float: right;
}
.news-container > li:nth-of-type(2n) > .circle {
  float: right;
}
.news-container > li:nth-of-type(1) > .circle > i {
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}
.more {
  font-size: 25px;
  color: #707070;
}
.more > i {
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .news-container > li {
    width: 100%;
  }
  .news-container > li > .content {
    width: 70%;
    text-align: left;
    float: right;
  }
  .news-container > li > .time {
    width: 30%;
    text-align: left;
    float: right;
  }
  .news-container > li > .circle {
    display: none;
  }
}
</style>

